<template>

      <div class="log_sty">
        <div>
           <div>
            <van-nav-bar left-arrow   @click-left="$router.go(-1)" />
          </div>
        </div>
      <div title>注册账号</div>

      <div cont>

        <van-cell-group>
          <van-field v-model="phone" type="tel" @input='input("phone")' maxlength="11"
            placeholder="请输入手机号码" />
        </van-cell-group>

        <van-cell-group v-show="!reg_success">

          <van-field v-model="sms" center maxlength="4" @input='input("sms")' placeholder="验证码">

            <van-button slot="button" @click="send($event)" size="small" class="sms_sty_g"
              type="primary">获取验证码</van-button>

          </van-field>

        </van-cell-group>

        <van-cell-group v-show="!reg_success">
          <van-field  v-model="Invitation" placeholder="请输入邀请码"  maxlength="6" @input='input("Invitation")' />
        </van-cell-group>

        <van-cell-group>
          <van-field v-model="pwd" name="pwd" type="password" maxlength="16" placeholder="请输入密码" @input='input("pwd")'
            @click-right-icon='pwd_show($event)' right-icon="closed-eye" />
        </van-cell-group>




        <div class="treaty">注册即代表阅读并同意<span>服务协议和隐私政策</span></div>
        <div v-show="!reg_success" class="but_sty sms_sty_o">
          <van-button type="primary" @click='register'>下一步</van-button>
        </div>
        <div v-show="reg_success" class="but_sty_success">
          <van-button to="/login">立即登录</van-button>
          <!-- <van-button  to="/upload_auth">立即认证</van-button>  -->
        </div>



      </div>

    </div>



</template>

<script>
import log_detection from '../../assets/js/log/log.js'
import { stringify } from 'querystring';
export default {
 name: "login",
data() {
    return {
        phone:'',
        pwd:'',
        sms:'',
        Invitation:'',
        crm_pws:'',
        sms_status:true, //验证码可点击状态
        reg_stauts:false,//注册按钮状态
        Invit_status:false,  //验证邀请码是否输入正确
        reg_success:false,// 注册成功后的验证
    }
},
  mounted() { 
   let that=this;
    that.base.head_status(1)
  },
 methods: {

        //头部导航点击返回事件
        bank() {
          vant.Toast('返回');
        },
        send(elem) {
          var that = this;

          if (log_detection.wait != 60) {
            return
          }

          if (!that.sms_status) return that.$toast({ message: '请些输入手机号码', position: 'bottom' });

          var data = { 'mobile': that.phone }
   
            

            that._API.SendCode(data).then(res => {
              console.log(res)
                if(res.code==200){
                   log_detection.timeCode(that,elem)
                }
                 that.$toast({ message: res.msg })
              }).catch(err => {
                console.log("err", err)
              })

          
        },
     
        input(param) {
          var that = this;

          if (!log_detection.input_phone(that, param)) return

          if (log_detection.wait == 60) {
            if (that.phone.length == 11) {
              that.sms_status = true;
            } else {
              that.sms_status = false;
            }
          }



          if(param=='Invitation'){
             that.Invit_status=false;
              if(that.Invitation.length==6){

                  var data={ "invit" : that.Invitation }
 
                   that._API.invit(data).then(res => {
                        if(res.code==200){
                          that.Invit_status=true;
                        }
                         that.$toast({ message: res.msg, position: 'bottom' })
                  }).catch(err => {
                    console.log("err", err)
                  })
              }
          }


        },
        pwd_show(elem) {

          if (elem.target.classList[0] != 'van-icon') return

          this.pwd_status ? this.pwd_status = false : this.pwd_status = true

          if (this.pwd_status) {

            document.getElementsByName("pwd")[0].type = "text"
            elem.target.classList = "van-icon van-icon-eye-o"
          } else {
            document.getElementsByName("pwd")[0].type = "password"
            elem.target.classList = "van-icon van-icon-closed-eye"
          }


        },
        register() {
          //   this.$router.push({ name: 'upload_auth'})
          // return
          var that = this;

          if (!log_detection.login(that, 'reg')) return


          var data = {
            'mobile': that.phone,
            'code': that.sms,
            'invit': that.Invitation,
            'passwd': that.pwd,

          };
            that._API.register(data).then(res => { 
                         if(res.code==200){
                          that.Invit_status=true;
                          that.reg_success=true
                         }
                          that.$toast({ message: res.msg, position: 'bottom' })
                      }).catch(err => {
                        console.log("err", err)
                      })

        },



      }
}
</script>


<style lang="scss" scoped >


    /deep/.van-hairline--bottom{    z-index: 4;position: fixed; width: 100%; background: #190147;   top: 0;}
    /deep/.van-nav-bar .van-icon{    color:white}
    .log_sty{    position: fixed;  margin: 30% auto;left: 0;right: 0;  top: 0;  bottom: 0;width: 90%;}

    .log_sty [title]{text-align: center;font-size: 1.5rem;margin-bottom: 1rem}
    .log_sty [cont]{ border-radius: 0.5rem;padding: 1rem;  }

    .log_sty [msg]{color:#999999;font-size: 0.8rem;    padding-left: 1rem;}

    .but_sty{text-align: center;  }
   
 
    .bglog_o button{background: #9113E7;}
    .but_sty button{width: 90%;border: 0;border-radius: 0.5rem;    border-radius: 2rem;}

    /deep/.van-cell-group{       background-color: #433165;    border-radius: 1.5rem;}
    /deep/.van-field {  background-color: initial;  margin: .6rem;  width: initial;border-radius: 0.05rem;border-radius: .5rem;    margin-bottom: .8rem;}
    /deep/.sms_sty_g{color: #BD52FF;background: #433165;border:0;}
    /deep/.sms_sty_o{border-radius: .2rem;}
    /deep/.but_sty button{width: 90%;border: 0;border-radius: 0.5rem;    border-radius: 2rem;} 
    /deep/.but_sty .van-button--primary{background: #831BFA;}
    /deep/.van-button--small{    height: 1.5rem; line-height: 1.4rem;}
    /deep/.van-field__control::-webkit-input-placeholder { color: white;}
    /deep/.van-field__control{color:white;}

    .treaty{font-size: 0.7rem;text-align: center;line-height: 2rem;color: #CCCCCC;}
    .treaty span{color:#831BFA}
    
    .but_sty_success{display: flex;justify-content:space-around}
    .but_sty_success>button{background: #831BFA;border: 0;border-radius: 3rem;    width: 40%;}
    .but_sty_success>button:nth-child(1){background: initial;border: 1px solid #831BFA;}
    .but_sty_success>button:nth-child(1)>span{color: #831BFA;}
    .but_sty_success>button:nth-child(2)>span{color: white;}


</style>
